<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   /*  div{
        width: 200px;
        height: 200px;
        background-color: cyan;
        margin: 10px;
        float: left;
    } */
    a{
        width: 200px;
        height: 200px;
        background-color: cyan;
        margin: 10px;
        /* float: left; */
        /* position: absolute; */
    }
    .wrap{
        border:1px solid black
    }
    .left{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: green;
        float: right;
    }
    .clear{
        clear: both;
    }
.wrap::after{
    content: '';
    display: block;
    clear: both;
}
    </style>
</head>
<body>
<!-- 
    <div>1</div>
    <div>2</div>
    <div>3</div>
    123132115715712974189237981273891731971
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a> -->
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
     
        12312312
    </div>
    <!-- <div class="clear"></div> -->
</body>
</html>